<template>
    <div class="editType" ref="editType" >
        <div class="first-child" v-if="activeName === 'first'">
            <div class="first-child-one results_margin">
                <ul>
                    <li 
                        v-for="(item, index) in gserviceCata" 
                        :key="index" 
                        @click="selectCate1(item)" 
                        :class="newResultsText.oneId === item.id ? 'selected' : ''">{{item.name}}</li>
                </ul>
            </div>

            <div class="first-child-two results_margin" v-show="childTwoArr.length">
                <ul>
                    <li 
                        v-for="(item, index) in childTwoArr" 
                        :key="index" 
                        @click="selectCate2(item)" 
                        :class="newResultsText.twoId === item.id ? 'selected' : ''">{{item.name}}</li>
                </ul>
            </div>

            <div class="first-child-three results_margin" v-show="childThreeArr.length">
                <ul>
                    <li 
                        v-for="(item, index) in childThreeArr" 
                        :key="index" 
                        @click="selectCate3(item)" 
                        :class="newResultsText.threeId === item.id ? 'selected' : ''">{{item.name}}</li>
                </ul>
            </div>

            <div class="results_bottom">
                <span class="spanE">你当前选择的是：</span>
                <span v-show="newResultsText.oneName">{{'  ' + newResultsText.oneName}}</span>
                <span v-show="newResultsText.twoName">{{'  »  ' +newResultsText.twoName}}</span>
                <span v-show="newResultsText.threeName">{{'  »  ' +newResultsText.threeName}}</span>
            </div>

            <div style="text-align: center; margin-top: 20px;">
                <el-button size="mini" type="primary" @click="next('second')">下一步</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { getList } from "@/api/admin/gservice";
export default {
    name: 'one',
    data () {
        return {
            newResultsText: {
                oneName: '',
                twoName: '',
                threeName: '',
                oneId: '',
                twoId: '',
                threeId: '',
                categoryIds: '', //类目id  层级 1->2->3
                categoryId: '',//商品分类id 这个是最底层类目id
            },
            gserviceCata: [],
            childTwoArr: [],
            childThreeArr: [],
        }
    },
    props: ['activeName', 'resultsText', 'categoryIds'],
    created () {
        this.getList()
    },
    methods: {
        //根据层级id，自动生成选中状态
        init (data) {
             //筛选一级
            data.forEach(item => {
                if (item.id === this.categoryIds[0]) {
                    this.newResultsText.oneName = item.name;
                    this.newResultsText.oneId = item.id;
                    this.childTwoArr = item.children;
                    return;
                }
            })

            if (this.childTwoArr.length) {
                this.childTwoArr.forEach(item => {
                    if (item.id === this.categoryIds[1]) {
                        this.newResultsText.twoName = item.name;
                        this.newResultsText.twoId = item.id;
                        this.childThreeArr = item.children;
                        return;
                    }
                })
            }

            if (this.childThreeArr.length) {
                this.childThreeArr.forEach(item => {
                    if (item.id === this.categoryIds[2]) {
                        this.newResultsText.threeName = item.name;
                        this.newResultsText.threeId = item.id;
                        return;
                    }
                })
            }

            this.newResultsText.categoryIds = this.categoryIds.join(',')
            this.newResultsText.categoryId = this.newResultsText.categoryIds[this.newResultsText.categoryIds.length-1];
        },
        curStyle (type, status) {
            if (status) {
                return 'background: #ff9979; color: #fff;'
            }
            console.log(this.activeName === type, status)
            return this.activeName === type ? 'background: #ff551f; color: #fff;' : 'background: #ebebeb; color: #333;'
        },
        //关闭弹窗
        dialogClose () {
            this.$emit("cancel");
        },
        getList() {
            getList(1, 999).then(res => {
                let result = res.data.data;
                this.gserviceCata = result.records;

                // 初始化选中状态
                this.init(this.gserviceCata)
            })
        },
        //选择一级分类
        selectCate1 (item) {
            this.newResultsText.oneId = item.id;
            this.newResultsText.oneName = item.name;
            this.childTwoArr = item.children;
            
            this.newResultsText.twoId = '';
            this.newResultsText.twoName = '';
            this.childThreeArr = [];
            this.newResultsText.threeId = '';
            this.newResultsText.threeName = ''

            this.newResultsText.categoryIds = this.newResultsText.oneId;

            this.newResultsText.categoryId = item.id;

        },
        selectCate2 (item) {
            this.newResultsText.twoId = item.id;
            this.newResultsText.twoName = item.name;
            this.childThreeArr = item.children;

            this.newResultsText.threeId = '';
            this.newResultsText.threeName = '';

            this.newResultsText.categoryIds = this.newResultsText.oneId + ',' + this.newResultsText.twoId;

            this.newResultsText.categoryId = item.id;
        },
        selectCate3 (item) {
            this.newResultsText.threeId = item.id;
            
            this.newResultsText.threeName = item.name;

            this.newResultsText.categoryIds = this.newResultsText.oneId + ',' + this.newResultsText.twoId + ',' + this.newResultsText.threeId;

            this.newResultsText.categoryId = item.id;
            console.log(this.newResultsText)
        },
        // 下一步
        next (status) {
            
            if (this.childThreeArr.length && this.newResultsText.threeId === '') {
                return this.$message({
                    type: 'info',
                    message: '请继续选择三级分类'
                })
            } else if (this.childTwoArr.length && this.newResultsText.twoId === '') {
                return this.$message({
                    type: 'info',
                    message: '请继续选择二级分类'
                })
            }
            console.log(this.childTwoArr.length, this.twoId)
            this.newResultsText.oneId ? this.$emit('next', status, this.newResultsText) : this.$message({
                    type: 'info',
                    message: '请选择商品类型'
                })
        }
    },
    watch: {
        activeName () {
            console.log('111111')
            this.newResultsText = JSON.parse(JSON.stringify(this.resultsText));
        },
        resultsText (cur) {
            this.newResultsText = JSON.parse(JSON.stringify(this.resultsText));
        }
    }
}
</script>

<style scoped>
ul {
    padding-left: 0;
    margin: 0;
}
li {
    list-style: none;
    font-size: 12px;
}
.table tr td .cell {
    overflow-x: scroll !important;
}
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .table—nav {
    display: flex;
    width: 100%;
    height: 40px;
    line-height: 40px;
    justify-content: space-between;
    margin-bottom: 30px;
  }
  .table—nav>div {
      text-align: center;
      background: #ebebeb;
      color: #333;
      width: 30%;
  }
  .curStyle {
      background: #ff551f;
       color: #fff;
  }
  .afterStyle {
      background: #ebebeb;
       color: #333;
  }
  .first-child li {
      padding: 0 5px;
      cursor: pointer;
  }
  .first-child {
      padding: 5px;
        border: 1px #c2daf2 solid;
        background: #eff8ff;
        margin-top: 10px;
        color: #444;
  }
  .results_margin {
        margin-right: 5px;
        border: 1px #b1d2ff solid;
        line-height: 24px;
  }
  .first-child-one, .first-child-two, .first-child-three {
        padding: 5px;
        overflow: auto;
        background: #fff;
        width: 206px;
        height: 288px;
        display: inline-block;
  }
  .selected {
      background: #eff8ff !important;
        border: 1px #98bbd1 solid;
        color: #1c4d92;
  }
  .results_bottom {
        background: #fffbf2;
        border: 1px #fddbab solid;
        margin-top: 10px;
        height: 30px;
        line-height: 30px;
        color: #3468ce;
        padding-left: 10px;
  }
</style>